<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-row style="text-align: right">
        <el-button type="primary" size="small" @click="showForm"
          >添加</el-button
        >
      </el-row>

      <el-table
        :data="pageList"
        stripe
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column label="名称" prop="name" width="160"></el-table-column>
        <el-table-column label="类型" prop="type">
          <template slot-scope="scope">
            {{ scope.row.type == 1 ? "菜单" : "按钮" }}
          </template>
        </el-table-column>

        <el-table-column label="组件名称" prop="component"></el-table-column>
        <el-table-column label="路径" prop="path"></el-table-column>
        <el-table-column
          label="权限值"
          prop="permissionValue"
        ></el-table-column>
        <el-table-column label="图标" prop="icon"></el-table-column>
        <el-table-column label="是否显示" prop="status">
          <template slot-scope="scope">
            {{ scope.row.type == 1 ? "显示" : "隐藏" }}
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="info"
              @click="handleUpdate(scope.row.id)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDel(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      title="保存"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <SaveFrom
        @done="done"
        :permissionId="permissionId"
        :close="dialogVisible"
        :list="list"
      />
    </el-dialog>
  </div>
</template>

<script>
import permissionApi from "@/api/permission";
import SaveFrom from "./save";
export default {
  name: "permission",
  components: {
    SaveFrom,
  },
  data() {
    return {
      list: [],
      pageList:[],
      dialogVisible: false,
      permissionId: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    done() {
      this.dialogVisible = false;
      this.getList();
    },
    close() {
      this.dialogVisible = false;
    },
    async getList() {
      let res = await permissionApi.tree();
      if (res.success) {
        this.list = res.data.records;
        this.pageList = res.data.records[0].children
      } else {
        return this.$message.error(res.msg);
      }
    },
    showForm() {
      this.permissionId = "";
      this.dialogVisible = true;
    },
    handleClose() {
      this.permissionId = "";
      this.dialogVisible = false;
    },
    handleUpdate(id) {
      this.permissionId = id;
      this.dialogVisible = true;
    },
    async handleDel(id) {
      console.log(id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await permissionApi.deletes(id);
          if (res.success) {
            this.$message.success("删除成功");
            this.getList();
          } else {
            return this.$message.error(res.msg);
          }
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
</style>